<template>
  <div class="venues">
    <h2>演出场馆</h2>
    
    <!-- 搜索和筛选区域 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="8">
        <el-input
          v-model="searchQuery"
          placeholder="搜索场馆名称"
          prefix-icon="el-icon-search"
          clearable
          @input="handleSearch"
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-select
          v-model="selectedCity"
          placeholder="选择城市"
          clearable
          @change="handleFilter"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="北京" value="北京"></el-option>
          <el-option label="上海" value="上海"></el-option>
          <el-option label="广州" value="广州"></el-option>
        </el-select>
      </el-col>
    </el-row>

    <!-- 场馆列表 -->
    <el-row :gutter="20" v-if="!loading">
      <el-col :span="8" v-for="venue in filteredVenues" :key="venue.id">
        <el-card>
          <div class="venue-image">
            <img :src="venue.imageUrl || '/images/default-venue.jpg'" :alt="venue.name" />
          </div>
          <div style="padding: 14px;">
            <h3>{{ venue.name }}</h3>
            <el-tag size="small" style="margin-bottom: 10px;">{{ venue.city }}</el-tag>
            <p>{{ venue.address }}</p>
            <p>容量: {{ venue.capacity }}人</p>
            <div class="bottom">
              <el-button type="text" @click="viewVenue(venue.id)">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 加载状态 -->
    <div v-if="loading" style="text-align: center; padding: 40px;">
      <el-loading-spinner type="circle"></el-loading-spinner>
      <p style="margin-top: 10px;">加载中...</p>
    </div>

    <!-- 无数据提示 -->
    <div v-else-if="filteredVenues.length === 0" style="text-align: center; padding: 40px;">
      <el-empty description="暂无符合条件的场馆"></el-empty>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from '../api/index.js'
import { ElMessage } from 'element-plus'

export default {
  name: 'Venues',
  setup() {
    const router = useRouter()
    const venues = ref([])
    const loading = ref(true)
    const searchQuery = ref('')
    const selectedCity = ref('')
    
    // 获取所有场馆数据
    const fetchVenues = async () => {
      try {
        loading.value = true
        const response = await api.get('/venues')
        venues.value = response
      } catch (error) {
        console.error('Failed to fetch venues:', error)
        ElMessage.error('获取场馆数据失败')
      } finally {
        loading.value = false
      }
    }

    // 根据搜索和筛选条件过滤场馆
    const filteredVenues = computed(() => {
      let result = venues.value
      
      // 根据城市筛选
      if (selectedCity.value) {
        result = result.filter(venue => venue.city === selectedCity.value)
      }
      
      // 根据名称搜索
      if (searchQuery.value.trim()) {
        const query = searchQuery.value.toLowerCase().trim()
        result = result.filter(venue => 
          venue.name.toLowerCase().includes(query)
        )
      }
      
      return result
    })

    // 搜索处理
    const handleSearch = () => {
      // 搜索功能由computed属性自动处理
    }

    // 筛选处理
    const handleFilter = () => {
      // 筛选功能由computed属性自动处理
    }

    const viewVenue = (id) => {
      router.push(`/venues/${id}`)
    }

    // 组件挂载时获取场馆数据
    onMounted(() => {
      fetchVenues()
    })

    return {
      venues,
      loading,
      searchQuery,
      selectedCity,
      filteredVenues,
      handleSearch,
      handleFilter,
      viewVenue
    }
  }
}
</script>

<style scoped>
.venues {
  padding: 20px;
}

.venue-image {
  height: 200px;
  overflow: hidden;
}

.venue-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.venue-image img:hover {
  transform: scale(1.05);
}

.bottom {
  margin-top: 10px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}
</style>